<template>
	<div class="imageView">
		<img v-if="styles.background=='system' && styles.imgName=='gif'" class="imageView-git" :src="getImage('/image/background/dynamic'+styles.bgImage+'.gif')"/>
		<img v-else-if="styles.background=='system' && styles.imgName=='png'" class="imageView-png" :src="getImage('/image/background/dynamicPng'+styles.bgImage+'.png')"/>
		<img v-else-if="styles.background=='system'" class="imageView-png" :src="getImage('/image/background/'+styles.imgName+styles.bgImage+'.png')"/>
		<img v-else-if="styles.background=='custom'" class="system-img" :src="getFilePath(styles.customImage)" alt="photo"/>
	</div>
</template>

<script>
/*
	素材控件
	选图片
 */
import ComponentView from "@/views/modules/preview/components/common/component-view.js";
import {Util,TokenUtil} from "@lowcode/jpaas-base-lib"
export default {
	name: "image-view",
	mixins:[ComponentView],
	data(){
		return{
			styles:{
			}
		}
	},
	mounted() {
		this.styles=this.config.styles;
	},
	methods:{
		getFilePath(fileId){
      let token = TokenUtil.getToken();
			fileId=Util.encryptWord(fileId);
			return "/api/api-system/system/core/sysFile/previewFile?fileId=" + fileId + "&accessToken=" + token;
		},

	}
}
</script>

<style scoped>
.imageView{
	width: 100%;
	height: 100%;
	overflow: hidden;
	display: flex;
	align-items: flex-start;
	justify-content: center;
}
.imageView-git{
	width: 100%;
}
.imageView-png{
	width: 100%;
	object-fit: cover;
}
.system-img{
	width: 100%;
	object-fit: cover;
	margin: auto;
}
</style>
